Comprehensive Notes on CSS Style Sheets

1. Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents. It separates structure (HTML) from design, making web pages easier to maintain and more visually appealing.

2. Types of CSS

Inline CSS: Written directly inside an HTML element using the style attribute.
Internal CSS: Defined inside a <style> tag within the <head> section.
External CSS: Stored in a separate .css file and linked using <link>. Best practice for scalability.

3. CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

Example:

p {
  color: blue;
  font-size: 16px;
}

4. Selectors

Universal Selector: * { ... }
Element Selector: p { ... }
Class Selector: .classname { ... }
ID Selector: #idname { ... }
Group Selector: h1, h2, p { ... }
Descendant Selector: div p { ... }
Pseudo-classes: a:hover { ... }

5. CSS Properties

CSS has a wide range of properties to style elements, such as:

Text Properties: color, font-size, text-align, line-height
Box Model: margin, border, padding, width, height
Backgrounds: background-color, background-image
Positioning: static, relative, absolute, fixed, sticky
Flexbox & Grid: Used for modern layouts

6. CSS Box Model

The box model defines how elements are rendered as rectangular boxes:

Content: The actual text or image.
Padding: Space between content and border.
Border: Surrounds the padding.
Margin: Space between elements.

7. Responsive Design

CSS supports responsive layouts using:

Media Queries: @media (max-width: 600px) { ... }
Flexbox & Grid for fluid layouts
Relative Units like em, rem, %, vw, vh

8. CSS Best Practices

Use external CSS for maintainability.
Organize styles logically (typography, layout, components).
Use classes instead of IDs for reusability.
Keep CSS modular and avoid redundancy.
Use comments to explain complex rules.

9. Advanced CSS Concepts

Transitions: Smooth animations between states.
Transforms: Rotate, scale, skew, translate elements.
Animations: @keyframes for custom effects.
Variables (Custom Properties): --main-color: #333;
CSS Frameworks: Bootstrap, Tailwind CSS, etc.